<template>
  <div class="container">
    <my-head></my-head>
    <div class="tab-block">
      <el-carousel height="810px" >
        <el-carousel-item v-for="(item,index) in bannerImg" :key="index">
          <img :src="item.img" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>


    <div class="box-zlb ">

      <div class="btz" ref="Dtitle" :class="['animate__animated',isDtitle?'animate__fadeInUp':'']">
        <h2>TUOYE模块五大领域</h2>
        <p>
          <span>艺术中心</span> <span>展厅展馆</span> <span>文旅酒店</span> <span>民宿</span> <span>咖啡店</span> <span>酒吧</span> <span>办公室</span> <span>美食街区</span>  <span>小镇集市</span> <span>快闪店</span> <span>研学营地</span> <span>接待中心</span>
        </p>
      </div>
      <div class="img-box" >

        <img v-if="haha==0" :class="['box','animate__animated' ,issf ?'animate__fadeInTopLeft':'animate__fadeInTopRight']"  src="../assets/img/ms.jpg" alt="">
        <img v-if="haha==1" :class="['box','animate__animated' ,issf ?'animate__fadeInTopLeft':'animate__fadeInTopRight']"  src="../assets/img/bs.jpg" alt="">
        <img v-if="haha==2" :class="['box','animate__animated' ,issf ?'animate__fadeInTopLeft':'animate__fadeInTopRight']"  src="../assets/img/syj.png" alt="">
        <img v-if="haha==3" :class="['box','animate__animated' ,issf ?'animate__fadeInTopLeft':'animate__fadeInTopRight']"  src="../assets/img/gy.jpg" alt="">
        <img v-if="haha==4" :class="['box','animate__animated' ,issf ?'animate__fadeInTopLeft':'animate__fadeInTopRight']"  src="../assets/img/bgs.jpg" alt="">

      </div>

      <div class="box-xh clearfix">

          <div  v-for="(item1,index1) in 5" :class="[index1 ==haha ? 'active':'']" :key="index1" @mouseenter="yiru(index1)" @mouseleave="yichu(index1)">
            <img :src="imgandfont[index1].img" alt="">
            <p>{{imgandfont[index1].font}}</p>
          </div>
      </div>
    </div>
    <div class="fu-title" ref="Dtitle2" :class="['animate__animated',isDtitle2?'animate__fadeInUp':'']">
      <div class="z-title" >
        <span>
			我们的优势
	    	</span>
        <P>
          您的需求，我们解决。有梦想，就有空间！
        </P>
      </div>
    </div>
    <div class="td-tab">
      <ul  ref="cebian" :class="['animate__animated',isCebian?'animate__fadeInLeft':'']">
        <li :class="[ lbdjcs == index ?'active':'']"  v-for="(item,index) in fonttab" :key="index" @mouseenter="changeCampusIndex(index)" >{{item.font}}</li>
      </ul>
      <div>
          <el-carousel height="450px" indicator-position="none" arrow="never" direction="vertical"  @change="ontab" ref="remarkCarusel" :autoplay="autoplay" >
          <el-carousel-item v-for="(item,index) in fonttab" :key="index">
            <img :src="fonttab[index].img" alt="">
            <span>{{ item.font2 }}</span>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="hdbt">
      <div class="fu-title">
        <div class="z-title">
        <span style="color: #ffffff">
			  传统建筑形式问题多
		    </span>

        </div>
      </div>
      <ul   class="wt"  >
        <li ref="Dtitle4" :class="['animate__faster','animate__animated',isDtitle4?'animate__fadeInUp':'']">
            <img src="../assets/img/fz1.png"  alt="">
        </li>
        <li ref="Dtitle4" :class="['animate__fast','animate__animated',isDtitle4?'animate__fadeInUp':'']">
          <img src="../assets/img/fz2.png"  alt="">
        </li>
        <li  ref="Dtitle4" :class="['animate__animated',isDtitle4?'animate__fadeInUp':'']">
          <img src="../assets/img/fz3.png"  alt="">
        </li>

      </ul>
      <div class="fu-title">
        <div class="z-title">
        <span style="color: #ffffff">
	专业水平值得信赖
		    </span>

        </div>
      </div>
      <ul class="dwlb" ref="Dtitle5" :class="['animate__animated',isDtitle5?'animate__fadeInLeft':'']">
        <li>
          <div class="x_r">
            <h2>木质建筑</h2>
            <p> 1、造成土地硬化，难以退耕还林</p>
            <p> 2、隔音效果较差，需要混凝土平台</p>
            <p> 3、防虫、防火、防潮等问题造成维护成本高</p>
          </div>
        </li>
        <li>
          <div class="x_r">
            <h2>废旧箱改造</h2>
            <p> 1、房间尺寸受限，室内具有压迫感</p>
            <p> 2、隔音隔热效果较差</p>
            <p> 3、品质较低，无法满足高端需求</p>
          </div>
        </li>
        <li>
          <div class="x_r">
            <h2>混凝土施工</h2>
            <p>1、造成土地硬化，难以退耕还林</p>
            <p>2、固定投资风险较大</p>
            <p>3、建造速度慢，环境污染较大</p>
          </div>
        </li>


      </ul>
    </div>

    <div class="fu-title" ref="Dtitle3" :class="['animate__fast','animate__animated',isDtitle3?'animate__fadeInUp':'']">
      <div class="z-title">
        <span style="color: #333333; font-size: 34px;">
				案例欣赏
	    	</span>
        <P>
          众多文旅民宿、商业办公、个性小铺选择我们
        </P>
      </div>
    </div>
    <div class="xuanx">
      <div :class="['animate__animated',isDtitle3?'animate__fadeInUp':'']">
        <p :class="[xuanxshuzi==index ?'active':'']"   v-for="(item,index) in xuanx" :key="index" @click="xufl(index)">{{item.font}}</p>
      </div>
      <ul>
        <li v-show="xuanxshuzi==0" class="animate__animated animate__fadeInUp"   >
          <div>
            <img src="../assets/img/q1.jpg" alt="">
            <p>
              集装箱商铺--看完你想天天逛的菜市场！
            </p>
          </div>
          <div>
            <img src="../assets/img/q2.jpg" alt="">
            <p> 集装箱烤鱼馆之旅</p>
          </div>
          <div>
            <img src="../assets/img/q3.jpg" alt="">
            <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
          </div>
          <div>
            <img src="../assets/img/q4.jpg" alt="">
            <p>
              太古仓浪漫码头酒店
            </p>
          </div>
          <div>
            <img src="../assets/img/q5.jpg" alt="">
            <p>
              COTOOP集装箱工作室
            </p>
          </div>
          <div>
            <img src="../assets/img/q6.jpg" alt="">
            <p>
              印度海得拉巴Dock 45集装箱会所
            </p>
          </div>
        </li>
        <li v-show="xuanxshuzi==1" class="animate__animated animate__fadeInUp" >

          <div>
            <img src="../assets/img/m1.jpg" alt="">
            <p>
              用集装箱做房间
            </p>
          </div>
          <div>
            <img src="../assets/img/m2.jpg" alt="">
            <p>
              集装箱民宿旅馆
            </p>
          </div>
          <div>
            <img src="../assets/img/m4.jpg" alt="">
            <p>
              四明湖畔第一网红集装箱民宿
            </p>
          </div>
          <div>
            <img src="../assets/img/m5.jpg" alt="">
            <p> 集装箱名宿</p>
          </div>

        </li>
        <li v-show="xuanxshuzi==2" class="animate__animated animate__fadeInUp" >

          <div>
            <img src="../assets/img/bs1.jpg" alt="">
            <p> 带游泳池的集装箱别墅</p>
          </div>
          <div>
            <img src="../assets/img/q2.jpg" alt="">
            <p> 集装箱烤鱼馆之旅</p>
          </div>
          <div>
            <img src="../assets/img/q3.jpg" alt="">
            <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
          </div>

        </li>
        <li v-show="xuanxshuzi==3" class="animate__animated animate__fadeInUp" >

          <div>
            <img src="../assets/img/jd1.jpg" alt="">
            <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
          </div>


        </li>
        <li v-show="xuanxshuzi==4" class="animate__animated animate__fadeInUp" >

          <div>
            <img src="../assets/img/jd.jpg" alt="">
            <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
          </div>

        </li>
        <li v-show="xuanxshuzi==5" class="animate__animated animate__fadeInUp" >
          <div>
            <img src="../assets/img/q5.jpg" alt="">
            <p>
              COTOOP集装箱工作室
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="bj-img">
      <div class="fu-title" ref="animate" :class="['box','animate__animated' ,isBounceInDown?'animate__fadeInUp':'']">
        <div class="z-title">
        <span style="color: #333333; font-size: 34px;">
				最新资讯
	    	</span>
          <P style="margin-top: 50px;">
            集装箱模块建筑行业动态
          </P>
        </div>
      </div>
      <div class="xuanx2">
<!--        <div ref="animate" :class="['animate__slow','animate__animated' ,isBounceInDown?'animate__fadeInUp':'']">-->
<!--          <p :class="[xuanxshuzi2==index ?'active':'']"   v-for="(item,index) in xuanx2" :key="index" @click="xufl2(index)">{{item.font}}</p>-->

<!--        </div>-->
        <ul ref="animate" :class="['animate__slow','animate__animated' ,isBounceInDown?'animate__fadeInUp':'']">
          <li v-show="xuanxshuzi2==0" class="animate__animated animate__fadeInUp"   >
            <div>
              <img src="../assets/img/jd.jpg" alt="">
              <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
              <span>在偌大的工厂空间内规划出独立的办公空间，除了大动干戈重新改造室内结构外，还有一种便捷的方式， 仅通过增添实现使用模块化结构 。这是位于大田大德工业园区的集装箱办公室...</span>
              <i>查看详情</i>
            </div>

            <div>
              <img src="../assets/img/jd.jpg" alt="">
              <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
              <span>在偌大的工厂空间内规划出独立的办公空间，除了大动干戈重新改造室内结构外，还有一种便捷的方式， 仅通过增添实现使用模块化结构 。这是位于大田大德工业园区的集装箱办公室...</span>
              <i>查看详情</i>
            </div>

            <div>
              <img src="../assets/img/jd.jpg" alt="">
              <p> 集装箱餐厅设计|新搞作最强设计感的货柜</p>
              <span>在偌大的工厂空间内规划出独立的办公空间，除了大动干戈重新改造室内结构外，还有一种便捷的方式， 仅通过增添实现使用模块化结构 。这是位于大田大德工业园区的集装箱办公室...</span>
              <i>查看详情</i>
            </div>
          </li>


        </ul>
      </div>
    </div>
    <section class="guanyu">
      <div>
        <h3>关于我们</h3>
        <em>TUOYE模块</em>
        <span>

<p>杭州拓野集装箱制造有限公司（简称：拓野TOUYE)，坐落于享有“人间天堂”美誉的杭州，拓野以模块化环保建筑为企业发展方向，把集装箱元素引进到装配式建筑体系之中，保留了集装箱原有的体形概念，通过专业的“研发团队、设计团队、技术团队、安装团队”，打造精湛、新颖、独特的集装箱模块建筑产品。
</p>
<p>拓野专注于集装箱模块化建筑领域，自主生产基地，拥有焊接、装修生产线、自动化生产设备。从项目咨询，规划到设计，再到生产制作落地，安装售后等完整产业链，保证产品成果优质输出。
   </p>
<p>拓野模块涉及五大领域：集装箱商业空间、集装箱居住空间、 集装箱公共空间、集装箱商务空间、集装箱休闲空间，涵盖艺术中心、展厅展馆、文旅酒店、民宿、创意咖啡店、酒吧、办公室、美食街区、小镇集市、快闪店、研学营地、接待中心、医疗建设等。传播环保生态理念，为生活、商业建筑带来绿色新活力。
</p>
		</span>

        <router-link :to="{path:'/abouts'}" tag="i"> 了解更多详情</router-link>
      </div>
    </section>
    <div class="zs">
      <img src="../assets/img/asd.png" alt="">
    </div>




    <my-foot></my-foot>
  </div>
</template>

<script>
    export default {
      data(){
        return{
          autoplay:true,
          lbdjcs:0,
          budong:0,
          show1: true,
          seen:false,
          current:0,
          aaa:false,
          show:true,
          isBounceInDown:false,
          isCebian:false,
          isDtitle:false,
          isDtitle2:false,
          isDtitle3:false,
          isDtitle4:false,
          isDtitle5:false,

          issf:false,
          haha:0,
          bannerImg:[
            {img:[require('../assets/img/banner1.jpg')]},
            {img:[require('../assets/img/banner2.jpg')]},
            {img:[require('../assets/img/banner3.jpg')]},
          ],
          bcimgandfont:[
            {img:[require('../assets/img/hicon1.png')],font:"集装箱休闲空间"},
            {img:[require('../assets/img/hicon2.png')],font:"集装箱居住空间"},
            {img:[require('../assets/img/hicon3.png')],font:"集装箱商务空间"},
            {img:[require('../assets/img/hicon4.png')],font:"集装箱公共空间民"},
            {img:[require('../assets/img/hicon5.png')],font:"集装箱商业空间"},

          ],
          imgandfont:[
            {img:[require('../assets/img/hw1.png')],font:"集装箱休闲空间"},
            {img:[require('../assets/img/hicon2.png')],font:"集装箱居住空间"},
            {img:[require('../assets/img/hicon3.png')],font:"集装箱商务空间"},
            {img:[require('../assets/img/hicon4.png')],font:"集装箱公共空间民"},
            {img:[require('../assets/img/hicon5.png')],font:"集装箱商业空间"},

          ],
          ruimgandfont:[
            {img:[require('../assets/img/hw1.png')],font:"集装箱休闲空间"},
            {img:[require('../assets/img/hw2.png')],font:"集装箱居住空间"},
            {img:[require('../assets/img/hw3.png')],font:"集装箱商务空间"},
            {img:[require('../assets/img/hw4.png')],font:"集装箱公共空间民"},
            {img:[require('../assets/img/hw5.png')],font:"集装箱商业空间"},

          ],
          siximg:[
            {img:[require('../assets/img/st.jpg')],font:"集装箱名宿"},
            {img:[require('../assets/img/hw2.png')],font:"集装箱别墅"},
            {img:[require('../assets/img/hw3.png')],font:"集装箱商街"},
            {img:[require('../assets/img/hw4.png')],font:"集装箱公园"},
            {img:[require('../assets/img/hw5.png')],font:"集装箱办公"},

          ],
          fonttab:[
            {img:[require('../assets/img/st.jpg')],font:"全新钢构",font2:"TUOYE模块采购全新国标级钢构材料，结合专业的施工工艺，以集装箱形式，打造灵活多变的模块建筑产品。"},
            {img:[require('../assets/img/mssj.jpg')],font:"装饰装修",font2:"TUOYE模块内装全部采用防潮、防腐、防水、防火级高分子装饰材料。                             。                                                                                                      杜绝使用石膏板、PVC地板、竹炭纤维空心板等廉价材料装修。"},
            {img:[require('../assets/img/sjgy.jpg')],font:"隔音隔热",font2:"TUOYE模块采用A级防火岩棉，岩棉纤维细长柔韧，渣球含量低，导热系数低，大量的细长纤维形成了多孔连接结构，具有良好的保温隔热效果。"},
            {img:[require('../assets/img/sgsp.jpg')],font:"水电通风",font2:"TUOYE模块可塑性强，因地制宜，可随意拼接组装，灵活拆装、迁移，根据项目特点量身定制实施方案。"},
            {img:[require('../assets/img/hbjn.jpg')],font:"低碳环保",font2:"TUOYE模块生产过程中，使用出厂的整材直接组装成型，预置率高达95%以上，减少现场施工，避免了材料、粉尘等污染，很大程度减少了建造过程中垃圾的产生；可回收利用，更加绿色环保。"},
            {img:[require('../assets/img/shwy.jpg')],font:"快速交付",font2:"TUOYE模块管理体系完善，集中采购，统筹管理，工厂化生产，现场快速拼接、安装，项目周期短，客户提前收益。TUOYE模块管理体系完善，集中采购，统筹管理，工厂化生产，现场快速拼接、安装，项目周期短，客户提前收益。"},
          ],
          xuanx:[
            {font:"全部案例"},
            {font:"集装箱民宿"},
            {font:"集装箱别墅"},
            {font:"集装箱商店"},
            {font:"集装箱酒店"},
            {font:"集装箱办公"},
          ],
          xuanx2:[
            {font:"公司动态"},
            {font:"行业咨询"},
            {font:"常见问题"},
          ],
          xuanxshuzi:0,
          xuanxshuzi2:0,

        }
      },
      // watch: {
      //   scrollTop(newVal,oldVal) {
      //     console.log(this.$refs.animate.offsetHeight )
      //     this.fullName = newVal + ' ' + oldVal;
      //     if(newVal+document.documentElement.clientHeight>this.$refs.animate.offsetTop){
      //       this.isBounceInDown=true;
      //     }else if(newVal){
      //       this.isBounceInDown=false;
      //     }
      //     },
      //
      // },
      methods:{
        xufl(e){
          this.xuanxshuzi=e
        },
        xufl2(e){
          this.xuanxshuzi2=e
        },
        ontab(val){
          this.lbdjcs = val ;
        },
        changeCampusIndex (index) {
          this.$refs.remarkCarusel.setActiveItem(index)
          this.autoplay = false;

        },
        enter(index){
          console.log(11)
          this.seen = true;
          this.current = index;
        },
        leave(){
          this.seen = false;
          this.current = null;
        },
        fade:function(){
        //  console.log(111)
          this.aaa=true
        },
        handleScollr(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          console.log(box.offsetTop)
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isBounceInDown=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isBounceInDown=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isBounceInDown=false;
          }

        },
        handleScollr2(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isCebian=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isCebian=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isCebian=false;
          }

        },handleScollr3(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isDtitle=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isDtitle=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isDtitle=false;
          }

        },handleScollr4(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isDtitle2=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isDtitle2=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isDtitle2=false;
          }

        },handleScollr5(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isDtitle3=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isDtitle3=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isDtitle3=false;
          }

        },handleScollr6(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isDtitle4=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isDtitle4=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isDtitle4=false;
          }

        },handleScollr7(box){
          this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //滚动的高
          // console.log(this.$refs.animate.offsetTop +document.documentElement.clientHeight,'离顶部的高')
          // console.log(document.documentElement.scrollTop +"---滚动高")
          if(this.scrollTop+document.documentElement.clientHeight> box.offsetTop){ //滚动高+可视区的高 > div距离顶部高   刚冒头触发
            this.isDtitle5=true;
            if(   this.scrollTop+ document.documentElement.clientHeight > box.offsetTop+document.documentElement.clientHeight + box.offsetHeight){
              //滚动高+可视区的高 > div距离顶部高 +可视区高 +本身高
              this.isDtitle5=false;
            }
          }else if( this.scrollTop+document.documentElement.clientHeight < box.offsetTop){
            //滚动高+可视区的高 < div距离顶部高
            this.isDtitle5=false;
          }

        },

        yichu(index){

          this.budong=index;
        },
        yiru(index){
          if(index==this.budong){return false;}

          let _this=this;
          this.imgandfont.map(function(item,index){

            _this.imgandfont[index].img= _this.bcimgandfont[index].img
            _this.imgandfont[index].font= _this.bcimgandfont[index].font
          })

          this.imgandfont[index].img= this.ruimgandfont[index].img;
          this.imgandfont[index].font= this.ruimgandfont[index].font;



          this.haha=index;
          this.issf=  !this.issf;

        },

      },
      mounted() {

        let _this = this
        window.addEventListener('scroll',()=>{return  _this.handleScollr(_this.$refs.animate)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr2(_this.$refs.cebian)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr3(_this.$refs.Dtitle)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr4(_this.$refs.Dtitle2)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr5(_this.$refs.Dtitle3)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr6(_this.$refs.Dtitle4)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr7(_this.$refs.Dtitle5)},false);
      },
      beforeDestroy(){
        let _this = this
        window.addEventListener('scroll',()=>{return  _this.handleScollr(_this.$refs.animate)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr2(_this.$refs.cebian)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr3(_this.$refs.Dtitle)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr4(_this.$refs.Dtitle2)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr5(_this.$refs.Dtitle3)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr6(_this.$refs.Dtitle4)},false);
        window.addEventListener('scroll',()=>{return  _this.handleScollr7(_this.$refs.Dtitle5)},false);

      },



    }
</script>

<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 2s
}
.tab-block{
 img{
   height: 810px;
   width: 100%;
   background-size: 100% 100%;
 }
}
.zs{
  width: 100%;
  height: 300px;
  position: relative;
  img{
    width: 1200px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -250px;
    margin-left: -600px;
  }
}
.guanyu{
  background: url("../assets/img/guanyu.jpg") no-repeat;
  min-height:670px;
  width: 100%;
  background-size: 100% 100%;
  overflow: hidden;
  div{
    overflow: hidden;
    width: 902px;
    height: 456px;
    background: url("../assets/img/box.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 40px;
    margin-top: 80px;

    h3{
      text-align: center;
      font-size: 32px;
      color: #ba0027;
    }
    p{
      font-size: 16px;
      color: #757575;
      line-height: 30px;
      text-indent: 2em;
    }
    em{
      font-style: normal;
      color: #ba0027;
      font-size: 20px;
    }
    span{
      font-size: 16px;
      color: #757575;
      line-height: 30px;
      margin-top: 24px;
    }
    i{
      font-style: normal;
      width: 160px;
      height: 40px;
      background-color: #2c88d8;
      border-radius: 4px;
      display: block;
      margin: 20px auto 0;
      line-height: 40px;
      text-align: center;
      color: #FFFFFF;
    }
  }
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
  .xuanx{
    width: 1200px;
    height: 700px;
    margin: auto;
    >div{
      display: flex;
      justify-content: center;
      align-items: center;
      p{
        margin: 0 20px;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        text-align: center;
        line-height:40px ;
        width: 160px;
        height: 40px;
       font-size: 18px;
      }
      .active{
        background: #ba0027;
        color: #ffffff;
        opacity: 1;
        transition:all 0.5s linear;
      }
    }
    ul{

      width: 1200px;
      height: 634px;
      margin: auto;
      overflow: hidden;
      margin-top: 30px;
      li{

        width: 1200px;
        height: 634px;
        display: flex;
        flex-wrap: wrap;

        >div{
          margin: 10px;
          img{
            width: 380px;
            height: 240px;
            background-size: 100% 100%;
          }
          p{
            text-align: center;
            font-size: 18px;
          margin-top: 20px;
          }
        }
      }
      .active{

      }
    }

    }

  .bj-img{ background: url("../assets/img/xinwen.jpg") no-repeat; width: 100%}
.xuanx2{
  width: 1200px;
  height: 600px;
  margin: auto;
  >div{
    display: flex;
    justify-content: center;
    align-items: center;
    p{
      margin: 0 20px;
      border: 1px solid #e4e4e4;
      border-radius: 4px;
      text-align: center;
      line-height:40px ;
      width: 160px;
      height: 40px;
      font-size: 18px;
    }
    .active{
      background: #ba0027;
      color: #ffffff;
      opacity: 1;
      transition:all 0.5s linear;
    }
  }
  ul{

    width: 1200px;
    height: 634px;
    margin: auto;
    overflow: hidden;
    margin-top: 30px;
    li{

      width: 1200px;
      height: 400px;
      display: flex;
      flex-wrap: wrap;

      >div{
        margin: 10px;
        width: 380px;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        padding: 30px 20px;
        box-sizing: border-box;
        img{
          width: 100%;
          height: 240px;
          background-size: 100% 100%;
        }
        p{
          text-align: center;
          font-size: 18px;
        }
        i{text-decoration: underline;}
      }
    }
    .active{

    }
  }

}
  .hdbt{
    background: url(../assets/img/youshi.jpg);
    background-position-x: center;
    margin-top: 110px;
    height: 936px;
    padding-top: 85px;
    .wt{
      display: flex;
      justify-content: center;
      li{

        background-size: 100% 100%;
        width: 300px;
        height: 270px;
        margin: 0 30px;
        img{
          width: 300px;
          height: 270px;
          background-size: 100% 100%;
          border: 10px solid #ffffff;
          border-radius: 5px;
        }
      }

    }
    .dwlb{
      display: flex;
      justify-content: center;
      li{
        width: 300px;
        height: 150px;
        margin: 0 30px;
        display: flex;
        align-items: center;
        background: #ffffff;     border-radius: 5px;
        >div{
          margin-left: 10px;
          font-size: 14px;
          line-height: 30px;
          color: #333333;

          h2{
            font-size: 18px;
            text-align: center;
          }
          p{
            font-size: 14px;

          }
        }
      }
    }
  }
    .td-tab{
      width: 1200px;
      height: 450px;
      margin: 20px auto;
      overflow: hidden;
      display: flex;
      ul{
        width: 250px;
        margin-left: 5px;
        background: #4b4c4e;
        display: flex;
        flex-wrap: wrap;
        border-right:10px solid #fff;
        li{
          width: 100%;
          height: 75px;
          box-sizing: border-box;
          border-bottom:1px solid #fef0f0;

          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: #fff;

        }
        li:nth-child(6){border: 0}
        .active{background: #ba0027;
      }
      }
      >div{
        width: 945px;
        height: 450px;
        position: relative;
        img{width: 100%; height: 100%; background-size: 100% 100%;}
        span{
          position: absolute;
          bottom: 0;
          left: 0;
          height: 75px;
          width: 100%;
        display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-style: normal;
          color: #fff;
          padding: 0 30px;
          box-sizing: border-box;
          background: rgba(0,0,0,0.5);

        }
      }
    }
    .box-zlb{
      width: 1200px;
      height: 900px;
      margin: 20px auto;
      overflow: hidden;
      padding-top: 100px;

      .img-box{
        height: 600px;
        width: 100%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
         background-size: 100% 100%;
        }
      }
      .btz{
        height: 100px;
        text-align: center;
        h2{
            font-size: 24px;
          color: #a98040;
          padding-top: 0px;
        }
        p{
          line-height: 100px;
          font-size: 16px;
          span{
            padding: 0 20px;
            border-left: 1px solid #999;
          }
          span:nth-child(1){
            border: none;
          }

        }
      }
      .box-xh{
        height: 100px;
        background: #efefef;
        display: flex;

        div{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          float: left;
          border-left: 1px solid #E3E3E3;
          img{
            margin-right: 20px;
           }
          p{
            font-size: 16px;
          }
        }
        div:nth-child(1){
          border-left: none;
        }


        .active{
          transform: translateY(-25px);cursor: pointer;
          transition:all 0.5s linear;
          background-color: #ba0027;
          height: 125px;
          border: none;
         p{
           color: #fff;
         }
        }
      }
    }
    .fu-title{
      height: 200px;
      padding-top: 60px;

      .z-title{

        text-align: center;
        h2{
          font-size: 30px;
          font-weight: bold;
          color: #dadada;
        }
        span{
          font-size: 30px;
          color: #a98040;
          position: relative;
        }
        span:after {
          content: '';
          position: absolute;   /*定位背景横线的位置*/
          bottom: -10px;
          left: 50%;
          margin-left: -20px;
          background: #ba0027;   /*背景横线颜色*/
          width: 40px;            /*单侧横线的长度*/
          height: 2px;
        }
        p{
          font-size: 20px;
          margin-top: 20px;
        }

      }
    }
    .cp{
      background: #f5f8f8;
      width: 100%;
      height: 500px;
      ul{
        li{
          float: left;
          width: 23%;
          height: 500px;
          background: #ffffff;
          margin:0 1%;
          text-align: center;
          img{
            width: 100%;
            display: block;
            margin: 0 auto;
            margin-top: 50px;
          }
          span{
            font-size: 20px;
            color: #333333;
            display: block;
            margin: 30px 0;
          }
          p{
            width: 158px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            display: inline-block;
            margin: 0 auto;
            border: 1px solid #333333;
          }
          p:hover{
            background: #a98040;
            color: #fff;
          }
        }
      }
    }
  .add-bj{
    background: url("../assets/img/bj.jpg") no-repeat;
  .neibu{
    width: 1200px;
    margin: 0 auto;

    .min-title{
      padding-top:20px;
      font-size: 18px;
      color: #666666;
      padding-left: 10px;
    }
    .btn-line{
      overflow: hidden;
      p{
        float: left;
        width: 150px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 18px;
        border: 1px solid #ccc;
        margin:30px 10px;
        border-radius: 5px;
        background: #ffffff;
      }
      .active{
        background: #333333;
        color: #fff;
      }
    }

  }
  }

  .add-box{
    .z-title{
      text-align: center;
      h2{
        font-size: 30px;
        margin-top: 53px;
        font-weight: bold;
        color: #e04728;
      }
      span{
        font-size: 20px;
        color: #666;
        position: relative;
      }
      span:before, span:after {
        content: '';
        position: absolute;   /*定位背景横线的位置*/
        top: 50%;
        background: #8c8c8c;   /*背景横线颜色*/
        width: 150%;            /*单侧横线的长度*/
        height: 2px;
        background: #e04728;
      }
      span:before {
        left: 120%;              /*调整背景横线的左右距离*/
      }
      span:after {
        right: 120%;
      }
    }
    .project{
      margin-top: 30px;
      width: 100%;

      >img{
        width: 50%;
        height: 400px;
      }
      >div{
        background: #1b0d09;
        width: 50%;
        height: 400px;
        padding: 10px 0 0 30px;
        color: #ffffff;
        .z-title2{
          h2{
            font-size: 30px;
            margin-top: 30px;
            font-weight: bold;
          }
          span{
            font-size: 20px;
            color: #666;
          }
        }
        p{
          margin-top: 30px;
          width: 600px;
          font-size: 22px;
        }
        .z-btn{
          width: 160px;
          height: 40px;
          color: #ffffff;
          text-align: center;
          line-height: 40px;
          margin-top: 40px;
          font-size: 20px;
          background: #bc1700;
        }
      }
    }
  }
  .center-new{
    width: 1200px;
    margin: 0 auto;

    .z-title{
      padding-bottom: 20px;
      text-align: center;
      h2{
        font-size: 30px;
        margin-top: 53px;
        font-weight: bold;
        color: #e04728;
      }
      span{
        font-size: 20px;
        color: #666;
        position: relative;
      }
      span:before, span:after {
        content: '';
        position: absolute;   /*定位背景横线的位置*/
        top: 50%;
        background: #8c8c8c;   /*背景横线颜色*/
        width: 150%;            /*单侧横线的长度*/
        height: 2px;
        background: #e04728;
      }

      span:before {
        left: 120%;              /*调整背景横线的左右距离*/
      }

      span:after {
        right: 120%;
      }
    }
    .mb1{
      box-sizing: border-box;
      li{
        width: 400px;

        box-sizing: border-box;
        float: left;
        padding: 0 10px;
        padding-bottom: 30px;

       >div {
         position: relative;
         img{
           width: 100%;
           height: 355px;
           background-size: 100% 100%;
         }
         >div{
           position: absolute;
           right: 0;
           bottom: 0;
           height: 40px;
           width: 100%;
           background: rgba(0,0,0,.3);
           color: #ffffff;
           text-align: center;
           p{
             font-size: 24px;
            color: #ffffff;
             text-align: center;
             line-height: 40px;

           }

         }
       }
        h2{
          p{
            font-size: 26px;
            text-align: center;
            line-height: 64px;

          }
          span{
            font-size: 18px;
            color: #999;
          }
        }
      }
    }

  }

</style>
